<template>
    <div class="channel">
        <Header :show="false">消息列表</Header>
	    <div class="content">
	    	<div class="recommend">
	    		<div class="icon1">
	    			<i class="fa fa-book"></i>
	    		</div>
	    		<span class="text">官方推荐</span>
	    		<span class="icon2"><i class="fa fa-angle-right"></i></span>
	    	</div>
	    	<div class="system recommend">
	    		<div class="icon1 sys-i">
	    			<i class="fa fa-bell"></i>
	    		</div>
	    		<span class="text">系统消息</span>
	    		<span class="icon2"><i class="fa fa-angle-right"></i></span>
	    	</div>
	    	<ul class="message">
	    		<li v-for="item,index in arrList">
	    			<p class="time">01月27日 12:11</p>
	    			<div>
	    				<p @click="showText">{{item.title}}</p>
	    				<p v-show="!text">{{item.msg}}</p>
	    			</div>
	    			
	    		</li>
	    	</ul>
	    </div>
    </div>
</template>

<script>
	import Header from './base/Header'
	export default {
		data() {
			return {
				arrList:[],
				text:true		
			}
		},
        components: {
        	Header
        },
        mounted() {
        	this.fetchData();
        },
        methods: {
        	fetchData() {
        		var _this = this;
        		this.$http.get('static/data/message.data')
        		.then(function(res){
        			_this.arrList = res.data;
        		}).catch(function(err){
        			console.log(err);
        		})
        	},
        	showText(){
        		this.text = !this.text;
        	}
        }
	}
</script>

<style scoped lang="less">
	.content{
		padding: 50px 0;
		.recommend{
			padding: 0.2rem 0.5rem 0;
			overflow: hidden;
			border-bottom: 0.5px solid #aaa;
			position: relative;
			.icon1{
				width: 0.8rem;
				height: 0.8rem;
				border-radius: 50%;
				background: #60a371;
				display: inline-block;
				text-align: center;
				i{font-size: 0.5rem;color: #fff;line-height: 0.8rem;height: 0.8rem;
				vertical-align: top;}
			}
			.text{
				font-size: 0.34rem;
				padding-left: 0.05rem;
				position: relative;
				top: -23px;
			}
			.icon2{
				float: right;
				vertical-align: top;
				position:absolute;
				right: 0.5rem;
				top: -0.2rem;
				i{color: #999;font-size: 0.56rem;}
			}
			.sys-i{background: #87a0e8;}
		}
		.message{
			li{
				margin: 0.2rem 0.5rem;
				.time{text-align: center;font-size: 0.24rem;color: #bbb;padding: 0.1rem;}
				div{
					padding: 0.2rem;
					border: 0.5px solid #999; 
					border-radius: 4px;
					p:first-child{
						font-size: 0.36rem;
						color: #111;
					}
					p:last-child{
						font-size: 0.27rem;
						margin: 0.1rem 0;
						line-height: 0.4rem;
						color: #888; 
					}
				}

				
			}
		}
	}
</style>